<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/5/22
  Time: 22:35
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>预订华住酒店；请填写预订信息 | 华住酒店官网</title>
    <link rel="shortcut icon" href="http://ws-www.hantinghotels.com/newweb/hotels/img/favicon.c14a5d56.ico" type="image/x-icon" />
    <link href="css/main.css?v=bIDYJ7VehhAPdg8xm0E3f7BZh8r0w1hfQr183m4zv2E1" rel="stylesheet"/>



    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/order.css">
    <link rel="stylesheet" href="../css/jquery-ui.min.css">

    <script src="js/top.js?v=QkH3caDmEyHISXnW7CgV-diLjcTYk1pPdOZLR5ssRg01"></script>

</head>
<body>
<div class="Mhead slim Lpt5 Lpb5">
    <div class="inner Cwrap">
        <div class="mbox">
            <a href="" title="首页" class="logo"></a>
            <div class="content Lcfx Ltar">
                <!-- 登录后设置span(.Ldib)-->
                <div style="display:none" class="welcomeGuest Ldib">
                    <div class="userCenter Ldib Lposr">
                        <a class="otherlink Lmb5 Lpr5 welcomeName Ldib mtOptionCenter" href="">
                            <i class="Cicon small_purpleuser"></i>Hi <em>
                            <span class="memberName"></span>

                            <i class="small_redCircle"></i>
                        </em>

                            <span class="userleveldesc"></span>
                            <i class="Ldib drop_arrow"></i>
                        </a>
                        <a class="mypointlink" href="https://my.huazhu.com/MyPoints"><i class="Cicon small_point" style="vertical-align: -4px;"></i>0</a>
                        <a class="noticelink" href="https://my.huazhu.com/NoticeCenter"><i class="Cicon small_email" style="vertical-align: -4px;"></i>0</a>


                        <a href="" class="myCenter Ldib">酒店首页</a>

                        <div class="userinfoPopup Lposa Ltal">
                            <ul class="userinfoPopupCont">
                                <li>
                                    <a href="">订单中心</a>
                                </li>
                                <li>
                                    <a href="">我的钱包</a>
                                </li>
                                <li>
                                    <a href="">我的券包</a>
                                </li>
                                <li>
                                    <a href="" class="personInfo Lposr">
                                        个人中心<i class="small_redCircle"></i>
                                    </a>
                                </li>

                                <li>
                                    <a href="javascript:;" id="_laySignOut" class="esc Ldib Lpr25">

                                        退出
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!-- 登录时设置span(display:none)-->
                <span style="display:none" class="Ldib LoginAndresister"><i class="Cicon small_purpleuser"></i><a href="javascript:;" class="guestLogin">登录</a><a href="javascript:;" class="guestRegister">免费注册</a></span>

            </div>
            <div class="contNav Lovh Lcfx Lfz14 Lflr">
                <div class="fillIn chooseActive"><a href="javascript:;" class="Ldb">1.填写订单</a></div>
                <div class="completed"><a href="javascript:;" class="Ldb">2.完成预订</a></div>
            </div>
        </div>
    </div>
</div>





<!--<script>-->
<!--    ndoo.vars.HotelID = "2001274";-->
<!--    ndoo.vars.HallIDs = "";-->
<!--    ndoo.vars.CheckInDate = "2020-05-13";-->
<!--    ndoo.vars.CheckOutDate = "2020-05-14";-->
<!--    ndoo.vars.ActivityID = "";-->
<!--    ndoo.vars.RoomType = "TR1";-->
<!--    ndoo.vars.BookingType = "0";-->
<!--    ndoo.vars.url = "https://passport.huazhu.com/Popup/Login?Type=Bookings&amp;RedirectUrl=https%3a%2f%2fbooking.huazhu.com%2fintorder%2fcreate%3fHotelID%3d2001274%26HallIDs%3d%26ActivityID%3d%26CheckInDate%3d2020-05-13%26CheckOutDate%3d2020-05-14%26RoomType%3dTR1%26BookingType%3d0%26RatePlanCode%3dBase-OIP-STD-NBF%26HotelLevel%3d4%26SegmentCategory%3d%26RoomCount%3d1%26GuestPerRoom%3d1";-->
<!--    ndoo.vars.initializeErrorShow = "";-->
<!--    ndoo.vars.Login = "True";-->
<!--    ndoo.vars.getLoginUserName = "15756036968";-->
<!--    ndoo.vars.LoginTel = "15756036968";-->
<!--    ndoo.vars.selectRoomUrl = "https://checkin.huazhu.com/";-->
<!--    ndoo.vars.LoginOutUrl = "https://passport.huazhu.com/Logout?RedirectUrl=https%3a%2f%2fbooking.huazhu.com%2fintorder%2fcreate%3fHotelID%3d2001274%26HallIDs%3d%26ActivityID%3d%26CheckInDate%3d2020-05-13%26CheckOutDate%3d2020-05-14%26RoomType%3dTR1%26BookingType%3d0%26RatePlanCode%3dBase-OIP-STD-NBF%26HotelLevel%3d4%26SegmentCategory%3d%26RoomCount%3d1%26GuestPerRoom%3d1";-->
<!--    ndoo.vars.HotelDetailUrl = "http://hotels.huazhu.com/Hotel/Detail?HotelId=2001274";-->

<!--    ndoo.vars.RatePlanCode = "Base-OIP-STD-NBF";-->
<!--    ndoo.vars.RoomCount = "1";-->
<!--    ndoo.vars.GuestPerRoom = "1";-->

<!--    ndoo.vars.HotelLevel = "4";-->
<!--    ndoo.vars.HotelCategory = "";-->

<!--    //会员信息扩展-->
<!--    ndoo.vars.MemberLevelDesc = "星会员";-->
<!--    ndoo.vars.ImgUrl = "";-->
<!--    ndoo.vars.MemberLevelID = "P";-->
<!--    ndoo.vars.IsForever = "False";-->
<!--    ndoo.vars.UserPhotoUrlPrefix = "http://ws-www.hantinghotels.com/";-->
<!--    ndoo.vars.IsCompanyCard = "False";-->
<!--    ndoo.vars.HasTempLevelInfo = false;-->
<!--</script>-->


<div class="IntOrder_main">
    <section class="m_wp Lcfx">
        <!-- 左侧主体-->
        <section class="left_wp Lfll">
            <div class="cont">
                <!-- 预订信息-->
                <h1 class="cont_top Lpl10 Lfz14">
                    预订信息<span class="Ldib subTitle Lfz12 noPpIntro" style="display: inline-block;">
                        <span>
                            已是会员？立即
                        </span><a href="" class="submitCheckIn">登录</a><span></span><i></i><span></span>
                    </span>
                </h1>
                <div id="orderEleInfo" class="cont_mid Lpt20 Lpl20 Lposr">
                    <p class="Lfz12 timeInput Lfwb">
                    <div class="info_group">
                        <label>入住时间</label><input type="text" name="orderIndata" id="inDate" class="datepicker"/>
                        <label>离店时间</label><input type="text" name="orderOutdata" id="outDate" class="datepicker"/>
                    </div>
                    </p>
                    <p class="roomNum Lfwb Lfz12">
                        <span>房间数量：</span>
                        <span class="Lposr roomCounts activetextS"> <em>1 </em>间</span>
                    </p>

                </div>
                <!-- 入住信息-->
                <h1 class="cont_top Lpl10 Lfz14 Lmt30"> 入住信息</h1>
                <div class="cont_mid Lpt20 Lpl10 guestCheckIn">
                    <div class="LoginGuest">
                        <p class="roomNum Lfwb Lfz12 repadl">
                            <label class="sWidth Ltar Ldib"><span class="guestIcon Lfz12 Ldib">*</span><span class="Ltar">入住人：</span></label><span class="guestCheckInName">
                                <input placeholder="姓Last name" type="text" class="reWidth reMarginRight firstName" id="name">
                            </span><span class="guestCheckInLastName">
                                <input placeholder="名First name" type="text" class="reWidth lastName">
                            </span><span style="display: none" class="inputPrompt"><i class="Cicon"> </i><em class="CiconInro">入住人格式输入错误</em></span>
                        </p>
                        <p class="roomNum Lfwb Lfz12 repadl">
                            <label class="sWidth Ltar Ldib"><span class="guestIcon Lfz12 Ldib">*</span><span class="Ltar">手机号码：</span></label><span class="guestCheckInTel">
                                <input maxlength="11" type="text" class="reWidth" id="mobile">
                            </span><span class="inputPrompt">订单提交后，我们会将预订信息发送至您的手机</span>
                        </p>
                        <!--                        <div class="isLogin">-->
                        <!--                            <p style="display: block" class="roomNum Lfwb Lfz12 repadl repadt">-->
                        <!--                                <label class="sWidth Ltar Ldib"><span class="guestIcon Lfz12 Ldib">*</span><span class="Ltar">图形验证码：</span></label><span class="guestImgValidate">-->
                        <!--                            <input maxlength="4" class="reWidth">-->
                        <!--                          </span><a class="NOimgValide Lml0 Ldib Ltac verifyimg"><img></a><span style="display:none" class="inputPrompt"><i class="Cicon"></i><em class="CiconInro">图形验输入不正确</em></span>-->
                        <!--                            </p>-->
                        <!--                            <p class="roomNum Lfwb Lfz12 repadl">-->
                        <!--                                <label class="sWidth Ltar Ldib"><span class="guestIcon Lfz12 Ldib">*</span><span class="Ltar">手机验证码：</span></label>-->
                        <!--                                <span class="guestTelValidate">-->
                        <!--                                    <input maxlength="6" class="reWidth" style="margin-left: 7px"><a href="javascript:;" class="getSendSMsInfo getSendSMsInfoActive Lml0 Ldib Ltac reserMargin">点击获取手机验证码</a>-->
                        <!--                                </span>-->
                        <!--                                <span style="display: none" class="inputPrompt"><i class="Cicon"></i><em class="CiconInro">手机验证码不正确</em></span>-->
                        <!--                            </p>-->

                        <!--                        </div>-->
                        <p class="roomNum Lfwb Lfz12 repadl">
                            <label class="sWidth Ltar Ldib"><span class="guestIcon Lfz12 Ldib">*</span><span class="Ltar">常用邮箱：</span></label><span class="guestCheckEmeil">
                                <input type="text" class="reWidth">
                            </span><span class="inputPrompt">订单提交后，我们会将预订信息发送至您的邮箱</span>
                        </p>

                    </div>
                    <p class="useCoupon Lfz12">
                        <a class="Lfwb otherRest">
                            <span class="Lml30 Lmr5">其他要求</span>
                            <!-- 激活状态加上 .useCouponActive--><i class="Ldib useCouponActive"></i>
                        </a>
                    </p>
                    <div class="CouponItem RestCont">
                        <p class="Lfz12 minorStyle"> 酒店会尽力满足您的需求，祝您入住愉快！</p>
                        <p class="otherReq">
                            <a class="Lfz12 Ldib Ltal first" id="noSmoke">
                                <!-- 激活状态加上 .selectActive--><i class="select Ldib Lmr5 selectActive"></i>尽量无烟
                            </a><a class="Lfz12 Ldib Ltal" id="yQuiet">
                            <!-- 激活状态加上 .selectActive--><i class="select Ldib selectActive"></i>尽量安静
                        </a><a class="Lfz12 Ldib Ltal" id="otherRequInfo">
                            <!-- 激活状态加上 .selectActive--><i class="select Ldib Lmr5"></i>其他
                        </a>
                        </p>
                        <textarea rows="3" cols="36" placeholder="请以英文填写该需求" class="otherRequst Ldn" id="otherRequInfoCont" onkeyup="value=value.replace(/[^\w\.\,\s\/]/ig,'')" onpause="value=value.replace(/[^\w\.\,\s\/]/ig,'')"></textarea>
                    </div>
                    <p class="tipsInfo Lfz12 minorStyle Ldn">预订过程中可能少量酒店存在价格调整情况，请以成功提交订单时价为准。</p>
                </div>
                <!-- 担保信息-->
                <div class="GuaranteePolicyWp">
                    <h1 class="cont_top Lpl10 Lfz14 Lmt30"> 担保信息  </h1>
                    <p class="Lc999 Lml20 Lmt20">温馨提示：在18:00（当地时间）之后抵达的客人必须提供担保</p>
                    <p class="useCoupon guaranteeInfoDetails Lfz12">
                        <a class="Lfwb infoDetailsLink">
                            <span class="Lml20 Lmr5">展开详情</span>
                            <!-- 激活状态加上 .useCouponActive--><i class="Ldib useCouponActive"></i>
                        </a>
                    </p>
                </div>
                <!---销售及取消政策-->
                <div class="cont_mid">
                    <p class="greenServe checkSelect Ldb Lmt20 Lmb20">
                        <input type="checkbox" id="male">
                        <label for="male">同意 </label><span class="saleACancel">《销售及取消政策》 </span>
                    </p>
                </div>
                <!-- 订单总价-->
                <div class="contCount Ltar Lpt10 Lpb10">
                    <p class="roomPrice Ldb" id="roomPrice"><em>房费</em><span>cny ${}</span><i></i></p>

                </div>
                <!-- 提交订单-->
                <div class="orderSubmit Lcfx Lcfx Lposr">
                    <div id="checkEveryPrice" class="ckEryDyPriceCont Lposa">
                        <table></table>
                    </div>
                    <div class="Ltac">
                        <p class="Ltal allCount cleartac">
                            <span class="Lfz14 Lpr5 orderCountPrice Lfwb"> 订单总价</span><em class="Lfz14 orderCountRmb"><b></b><i>cny 288.00 </i></em>
                            <span class="everyDayPricewp"><i class="everyDayPrice Lml40 ">每日房价</i></span>
                        </p>
                        <p class="Ltal allCount "><em class="changeStyle orderCountOther"> <b>  </b><span class="changeStyle"></span></em><i class="blankWidth Ldib"></i></p>
                        <a href="javascript:;" class="Lfz16 Ltac Ldb Lmt5 Lmb10 submitOrderBtn" id="btn_booking"> 提交订单</a>
                    </div>
                </div>
            </div>
        </section>
        <!-- 右侧主体-->
        <aside class="right_wp Lflr">
            <div class="cont">
                <!-- 酒店图片-->
                <div id="hotelInfo" class="Ldb hotelHref">
                    <!-- 酒店床型-->
                    <div class="asideImg"><img src="../img/1.jpg" style="width: 310px; height: 200px"></div>
                    <!-- 酒店地址-->
                    <div class="asideTitle">
                        <h2 class="Lfz14 HotelName">上海陆家嘴禧玥酒店</h2>
                        <div class="hotelTypeWrap">
                            <span class="hotelType">
                                四星级
                            </span>
                            <span class="infoShow"></span>
                        </div>
                        <p class="Lfz12 HotelAddress">上海市浦东新区浦明路868弄(陆家嘴 黄浦江畔)</p>
                    </div>

                </div>
                <div id="roomInfoModel" class="asideTitle paddingTop15">
                    <h2 class="Lfz16 RoomTypeName paddingBtm4">经典双床房</h2>
                    <p class="Lfz12 roomDescription">房间描述：<span>
                        城景房（落地窗），金可儿零压床垫，65寸液晶电视（可投屏），贵妃榻，休闲茶桌（上下茶具），mini吧冰箱（6款饮品+1款小食），洗漱台，独立淋浴间（果萃精油洗护），独立卫生间（卫洗丽）。
                    </span></p>
                </div>
                <!-- 酒店公告-->
                <div id="hotleInfoModel" class="asideTitle paddingTop15 clearBorder">
                    <h2 class="Lfz16 paddingBtm4">酒店公告</h2>
                    <div class="cont_item hotelNotices">
                        <ol></ol>
                    </div>
                    <p class="Lfz12 saleAndCancelPolicy ">取消政策：<span> 如果不想支付取消费用,需在入住日0天18:00:00（时间）之前取消预订，超出这一时间，将收取费用 </span></p>
                    <p class="Lfz12 GuaranteePolicy ">担保政策：<span> 无 </span></p>
                    <p class="Lfz12 hotelTelphone">酒店电话：<span> 021-60128218 </span></p>
                    <p class="Lfz12 notice_all">客服电话：4008-121-121</p>
                </div>

            </div>
        </aside>
    </section>
</div>
<!-- 弹窗1(销售及取消政策框)-->
<div style="display:none" class="promptPopups saleAndCancel">
    <i class="lay-wrap Ldb"></i>
    <div class="popus-cont Ldb">
        <a href="javascript:;" class="close"></a>
        <div class="c-cont Lfz14">
            <h2 class="Ldb Ltac Lfz16">销售及取消政策</h2>
            <p class="Ldb Ltac"><span class="CancelPolicySubWp"><b class="Ldb">取消政策：</b><span class="Ldb" id="CancelPolicy"></span></span><span class="GuaranteePolicySubWp"><b class="Ldb">担保政策：</b><span class="Ldb" id="GuaranteePolicyInfo"></span></span></p><a href="javascript:;" class="Lfz16 Lmt40 Ltac Ldb sure">确定</a>
        </div>
    </div>
</div>
<!-- 弹窗2(登录框)-->
<div id="IframPopups" class="IframPopups">
    <i class="lay-wrap"></i>
    <div class="popus-cont">
        <a href="javascript:;" class="close Lposa"></a>
        <div class="c-cont"></div>
    </div>
</div>

<!-- 弹窗3（错误提示框）-->
<div class="promptPopups warmTips" style="display:none;">
    <i class="lay-wrap Ldb"></i>
    <div class="popus-cont Ldb">
        <a href="javascript:;" class="close"></a>
        <div class="c-cont Lfz14">
            <h2 class="Ldb Ltac Lfz16">温馨提示</h2>
            <p class="Ldb Ltac"> <span class="error_intro Lfz14 Ltac"></span></p><a href="javascript:;" class="Lfz16 Lmt40 Ltac Ldb sure">确定</a>
        </div>
    </div>
</div>
<!--弹窗4(订单提交等待效果窗)-->
<div class="submiting">
    <i class="lay-wrap"></i>
    <div class="popus-cont">
        <div class="c-cont">
            <h3 class="sub_Tip_title">订单提交中</h3>
            <div class="submit_wrap">
                <p><span class="loadingSubmitImg"></span><span class="submit_intro">订单提交中，请稍候...</span></p>
            </div>
        </div>
    </div>
</div>


<!--弹窗5同意《销售及取消政策》-->
<div class="JPopups rePouponTips reppwidth">
    <i class="lay-wrap"></i>
    <div class="popus-cont">
        <a href="javascript:;" class="close"></a>
        <div class="c-cont">
            <p><em class="error_img"></em><span class="error_intro"></span></p>
        </div>
    </div>
</div>
<footer class="Mfoot">
    <div class="inner Cwrap Lpb25 Lpt25">
        <div class="links Ltac">
            <a href="">华住会介绍</a><a href="" target="_blank">酒店加盟</a><a href="" target="_blank">职位招聘</a><a href="">意见反馈</a><a href="">联系我们</a>
        </div>
        <p class="copyright Ltac Lmt20">
            沪ICP备12041475 | &#169; 2020 Huazhu All Rights reserved.汉庭星空（上海）酒店管理有限公司
        </p>
    </div>
</footer>
<div id="scriptArea" data-page-id="IntOrder/Create" class="Ldn">
    <script>
        ndoo.vars.pageId = "IntOrder/Create";
        ndoo.vars.StartNewMemberPolicy = true;
        ndoo.vars.CancelOrderSwitch = true;
    </script>
    <script src="https://campaign.huazhu.com/passportStatic/content/js/memberNewNotice.js"></script>
    <script src="/Content/js/main.js?v=H_k_cswJnLF5wEl92sZuia17lSFkxyf3RQHt6-Zy7GE1"></script>

    <script>
        function loadjs(src) {
            var s = document.createElement('script');
            s.type = 'text/javascript';
            s.async = true;
            s.src = src;
            var x = document.getElementsByTagName('script')[0];
            x.parentNode.insertBefore(s, x);
        }
    </script>



    <script>
        $(function() {
            $(".datepicker").datepicker({"dateFormat":"yy-mm-dd"});
            $("#btn_booking").click(function(){
                var inDate = $("#inDate").val();
                var outDate = $("#outDate").val();
                if(inDate == '' || outDate == ''){
                    alert('请选择时间!');
                    return;
                }
                var name = $("#name").val();
                if(name == ''){
                    $("#name").next("span.msg").text('请填写入住人!');
                    return;
                }
                $("#name").next("span.msg").text('');
                var mobile = $("#mobile").val();
                if(mobile == ''){
                    $("#mobile").next("span.msg").text('请填写手机号!');
                    return;
                }
                $("#mobile").next("span.msg").text('');
                var idCard = $("#idCard").val();
                if(idCard == ''){
                    $("#idCard").next("span.msg").text('请填写身份证号!');
                    return;
                }
                $("#idCard").next("span.msg").text('');
                var remark = $("#remark").val();
                $.ajax({
                    url:'book_order',
                    type:'post',
                    dataType:'json',
                    data:{roomId:'${roomId.id }',name:name,mobile:mobile,idCard:idCard,remark:remark,inDate:inDate,outDate:outDate},
                    success:function(data){
                        if(data.type == 'success'){
                            $(".malog").show();
                            setTimeout(function(){
                                window.location.href = 'index';
                            },1000)
                        }else{
                            alert(data.msg);
                        }
                    }
                });
            })
        });
    </script>


    <script type="text/javascript" src="js/huazhu_track.js"></script>
    <!--[if lte IE 9]><script src="js/jquery.placeholder.min.js"></script>
<script>$('input, textarea').placeholder();</script><![endif]-->
</div>
</body>
</html>
